<template>
  <div class="safety-main">1
    <div ref="box" style="width:100%;height:240px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"
export default {
  data() {
    return {};
  },
  methods: {
    print() {
      let print = echarts.init(this.$refs.box);
      let option = {
        title: {
          text: "小区安全系数",
          textStyle: {
            // 大标题 名称
            color: "white"
          }
        },
        color: ["red", "yellow", "skyblue", "blue"], // 改变标题颜色 与线条颜色 统一
        legend: {
          orient: "vertical", // 标题默认水平 垂直
          left: "left", // 标题定位 居中 左 右
          top: 100, // 定位 的 宽高
          textStyle: {
            // 字体的颜色
            color: "red"
          },
          show: true, // 是否显示标题
          data: [
            { name: "后湖小区", icon: "circle" },
            { name: "金鹅", icon: "circle" },
            { name: "亿达", icon: "circle" },
            { name: "天马", icon: "circle" }
          ] // 标题内容
        },
        tooltip: {
          // 悬停
          trigger: "item"
          // backgroundColor: "rgba(255,255,255,0.8)", //设置背景图片 rgba格式
          // color: "black",
          // borderWidth: "1", //边框宽度设置1
          // borderColor: "gray", //设置边框颜色
          // textStyle: {
          //   color: "black" //设置文字颜色
          // },
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "监控安防", max: 6500 },
            { name: "异常出入", max: 16000 },
            { name: "外来车辆数量", max: 30000 },
            { name: "温度异常", max: 38000 },
            { name: "重点人口", max: 52000 }
          ]
        },
        series: [
          {
            name: "预算 vs 开销",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 5000, 1800],
                name: "后湖小区"
              },
              {
                value: [5120, 14320, 8120, 26000, 2000, 21000],
                name: "金鹅"
              },
              {
                value: [5000, 14540, 28200, 25400, 42320, 21010],
                name: "亿达"
              },
              {
                value: [5000, 10330, 21200, 21230, 22010, 11000],
                name: "天马"
              }
            ]
          }
        ]
      };
      print.setOption(option);
    }
  },
  mounted() {
    this.print();
    console.log('orin')
  }
};
</script>

<style lang="scss">
$yellow: yellow;
.safety-main {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  .botton_left {
    // flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
    top: 60px;
    width: 20%;
    ul {
      margin-left: 20px;
      padding: 0px;
      height: 260px;
      flex: 3;
      li.one,
      li.two,
      li.three,
      li.four,
      li.five {
        list-style-type: disc;
        height: 30px;
        span {
          color: $yellow;
        }
      }
      li.one {
        color: red;
      }
      li.two {
        color: salmon;
      }
      li.three {
        color: yellow;
      }
      li.four {
        color: green;
      }
      li.five {
        color: blue;
      }
    }
  }
}
</style>
